<template>
  <view class="max_box">
    <!-- ------------------------ 自定义导航栏-开始 ------------------------ -->
    <u-navbar bgColor="rgba(0, 0, 0, 0);" @leftClick="backHome" leftIconColor="#fff"></u-navbar>
    <!-- ------------------------ 顶部背景图**start ------------------------ -->
    <view class="top_bg"
      :style="{ 'background': 'url(' + imgBg + ')', 'backgroundPosition': '50% -700rpx', 'backgroundSize': '100% auto', 'backgroundRepeat': 'no-repeat' }">
    </view>
    <!-- ------------------------ 表单盒子**start ------------------------ -->
    <view class="form_box">
      <view class="title">预约试驾</view>
      <uni-forms ref="valiForm" :rules="rules" label-align="center" label-width="100px" label-position="left"
        :modelValue="testDriveaParam" border>
        <view class="card ">
          <uni-forms-item label="体验中心" name="company">
            <view class="my-input-box">
              <view class="fwb my-input" v-if="testDriveaParam.company.length" @click="$refs.selectComPopRef.open()">{{
                testDriveaParam.company
              }}</view>
              <view v-else class="my-input placehol" @click="$refs.selectComPopRef.open()">请选择体验中心</view>
              <uni-icons class="icon" color="#999" type="bottom" size="40rpx"></uni-icons>
            </view>
          </uni-forms-item>

          <!-- ------------------------ 车型选择**start ------------------------ -->
          <uni-forms-item label="意向车型" name="car_model">
            <view class="my-input-box">
              <view class="fwb my-input" @click="$refs.selectCarPopupRef.open()" v-if="testDriveaParam.car_model.length">
                {{
                  testDriveaParam.car_model
                }}</view>
              <view v-else class="my-input placehol" @click="$refs.selectCarPopupRef.open()">请选择意向车型</view>
              <uni-icons class="icon" color="#999" type="bottom" size="40rpx"></uni-icons>
            </view>
          </uni-forms-item>
          <view v-show="testDriveaParam.company.length">
            <uni-forms-item label="预约方式" name="way">
              <view class="my-input-box">
                <view class="my-input" v-if="testDriveaParam.way.length" @click="$refs.selectWatPopRef.open()">{{
                  testDriveaParam.way
                }}</view>
                <view v-else class="my-input placehol" @click="$refs.selectWatPopRef.open()">请选择预约方式</view>
                <uni-icons class="icon" color="#999" type="bottom" size="40rpx"></uni-icons>
              </view>
            </uni-forms-item>

            <uni-forms-item v-if="testDriveaParam.way == '预约到访'" label="预约时间" name="visit_time">
              <view class="my-input-box">
                <view class="my-input" v-if="testDriveaParam.visit_time.length" @click="openPopup">{{
                  testDriveaParam.visit_time }}</view>
                <view v-else class="my-input placehol" @click="openPopup">请选择预约时间</view>
                <uni-icons class="icon" color="#999" type="bottom" size="40rpx"></uni-icons>
              </view>
            </uni-forms-item>
            <uni-forms-item label="姓　　名" name="name">
              <uni-easyinput maxlength="10" placeholder="请输入您的姓名" :inputBorder="false" :styles="inputStyles"
                v-model="testDriveaParam.name" :placeholderStyle="placeStyle" />
            </uni-forms-item>

            <uni-forms-item label="联系方式" name="car_model">
              <view class="my-input-box">
                <view class="my-input" v-if="testDriveaParam.contactWay.length"
                  @click="$refs.selectContactWayPopRef.open()">{{
                    testDriveaParam.contactWay
                  }}</view>
                <view v-else class="my-input placehol" @click="$refs.selectContactWayPopRef.open()">请选择联系方式</view>
                <uni-icons class="icon" color="#999" type="bottom" size="40rpx"></uni-icons>
              </view>
            </uni-forms-item>

            <uni-forms-item label="电话号码" name="phone_no">
              <view class="phone_no">
                <view style="margin-right: 10rpx;" v-if="isHKAndMacao">{{ photoPrefix }}</view>
                <uni-easyinput maxlength="11" type="number" placeholder="请输入您的电话号码" :inputBorder="false"
                  :styles="inputStyles" :placeholderStyle="placeStyle" v-model="testDriveaParam.phone_no" />
              </view>
            </uni-forms-item>
            <uni-forms-item v-if="isHKAndMacao" label="邮　　箱" name="email">
              <uni-easyinput maxlength="18" placeholder="请输入您的邮箱" :inputBorder="false" :styles="inputStyles"
                v-model="testDriveaParam.email" :placeholderStyle="placeStyle" />
            </uni-forms-item>
            <uni-forms-item label="现有车型" name="curr_car_model">
              <uni-easyinput maxlength="12" placeholder="请输入您的现有车型" :styles="inputStyles"
                v-model="testDriveaParam.curr_car_model" :inputBorder="false" :placeholderStyle="placeStyle" />
            </uni-forms-item>
            <uni-forms-item label="备　　注">
              <uni-easyinput maxlength="150" autoHeight type="textarea" placeholder="如有特别要求请填写"
                v-model="testDriveaParam.remark_box" :placeholderStyle="placeStyle">
              </uni-easyinput>
            </uni-forms-item>
          </view>
        </view>
      </uni-forms>
    </view>
    <!-- ------------------------ 表单盒子**end ------------------------ -->
    <!-- ------------------------ 底盒子**start ------------------------ -->
    <view class="bottom-box" v-show="testDriveaParam.company.length">
      <view class="radio_box" style="margin: 0 0 20rpx 0;">
        <u-checkbox-group>
          <u-checkbox activeColor="#de4141" :checked="checkedVal" @change="change">
          </u-checkbox>
        </u-checkbox-group>
        <view>
          我已閱讀，理解並同意<text @click="$refs.ruleHK.openRul()" class="policy">《私隱政策》</text>，包括個人資料收集聲明。</view>
      </view>
      <view class="radio_box">
        <u-checkbox-group>
          <u-checkbox activeColor="#de4141" :checked="pushMsg" @change="pushMsgChange">
          </u-checkbox>
        </u-checkbox-group>
        <view>
          我不希望收到錦龍汽車集團的直接促銷。</view>
      </view>
      <view class="sub-btn" color="#de4141" @click="submit('valiForm')">提 交</view>
    </view>
    <!-- ------------------------ 预约公司弹窗**开始 ------------------------ -->
    <uni-popup ref="selectComPopRef" type="bottom" background-color="#fff">
      <PopupItemTest :list="centers" :value="testDriveaParam.company" @select="selectCom" label="text"
        @close="$refs.selectComPopRef.close()" title="请选择预约门店" distance>
      </PopupItemTest>
    </uni-popup>
    <!-- ------------------------ 选择车型弹窗**开始 ------------------------ -->
    <uni-popup ref="selectCarPopupRef" type="bottom" background-color="#fff">
      <view class="select-car">
        <!-- 顶，标题 -->
        <view class="select-car__t">
          <view class="select-car__t--title"> 请选择预约车型 </view>
          <uni-icons type="closeempty" size="20" @click="$refs.selectCarPopupRef.close()"></uni-icons>
        </view>
        <view class="select-car__d">
          <!-- 车型item -->
          <view :class="[item.name === testDriveaParam.car_model ? 'active' : '', 'select-car__item']"
            v-for='(item, index) in selectCarModelList' :key='item.id' @click="selectCar(item)">
            <view class="select-car__item--l">
              <view class="name">ZEEKR {{ item.name }}</view>
              <!-- <view v-if="item.name === '007'">纯电豪华轿车</view> -->
              <view v-if="item.name === '009'">全球首款原生纯电豪华MPV</view>
              <view v-if="item.name === 'X'">新奢全能SUV</view>
            </view>
            <view class="select-car__item--r">
              <image class="img" :src="item.vem_coverImg" mode="aspectFit"></image>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- ------------------------ 预约方式弹窗**start ------------------------ -->
    <uni-popup ref="selectWatPopRef" type="bottom" background-color="#fff">
      <popup-item-test :list="watSelect" :value="testDriveaParam.way" @select="selectWay" label="value"
        @close="$refs.selectWatPopRef.close()" title="请选择预约方式" />
    </uni-popup>
    <!-- ------------------------ 联系方式弹窗**start ------------------------ -->
    <uni-popup ref="selectContactWayPopRef" type="bottom" background-color="#fff">
      <popup-item-test :list="contactWaySelect" :value="testDriveaParam.contactWay" @select="contactWay" label="value"
        @close="$refs.selectContactWayPopRef.close()" title="请选择联系方式" />
    </uni-popup>
    <!-- ------------------------ 联系方式弹窗**end ------------------------ -->
    <!-- 政策组件 -->
    <RulesCompany ref="rule"></RulesCompany>
    <!-- 香港政策组件 -->
    <RulesCompanyHK ref="ruleHK"></RulesCompanyHK>
    <!-- 登录组件 -->
    <UserLoginModal ref="openLogin"></UserLoginModal>
    <!-- 日期选择组件 -->
    <MyDateSelect @selectDate="selectDate" ref="dateSelect"></MyDateSelect>
  </view>
</template>

<script>
// import imgBg from '@/static/007.png'
import { mapState, mapMutations } from 'vuex'
import { subscMixin } from '@/mixins/mixins'
import { location } from '@/mixins/location'
import { carModelListApi } from '@/API/carSeries'
import PopupItemTest from "./components/PopupItemTest";
// 试驾预约规则
import { rulesTestDrive } from '@/static/js/rules'
let carModel = {
  state: 1,
  brand_id: 52,
}
export default {
  name: 'TestDrive',
  mixins: [location, subscMixin], // 混入
  components: { PopupItemTest },
  data() {
    return {
      inputStyles: { fontsize: '1px', color: '#0ff', },
      placeStyle: "color: #f00;font-size: 26rpx;",
      // 基础路径
      baseUrl: this.$baseUrl,
      // imgBg: imgBg,
      imgBg: '', //要设一个线上的图
      // 基础表单数据
      testDriveaParam: {
        type: 'A',
        name: '',
        phone_no: '',
        address: '',
        curr_car_model: '',
        car_age: '',
        car_model: '',
        industry: '',
        company: '',
        company_id: '',
        brand_id: '',
        uuid: '',
        // -----
        email: '',//邮件
        promotion: '', //是否推广 // 推送消息
        remark_box: '',//备注
        visit_time: '', //到访时间
        // -----------
        way: '',
        contactWay: '',
      },
      // 校验规则
      rules: [],
      // rules: rulesTestDrive,
      // 试驾信息
      testDrive: {
        brand_id: '',
        userInfo: {
          touser: '',
          page: 'pages/TestDrive/MyTestDrive',
          template_id: '',
          data: {}
        }
      },
      // 车型列表
      carModelList: [],
      watSelect: [
        { id: 1, value: '预约赏车' },
        { id: 2, value: '预约到访' },
      ],
    }
  },
  onLoad(option) {
    let { img_src, ve_name, companyId, scene } = option
    if (img_src) { //背景图
      this.imgBg = img_src
      // 车型列表
      this.carModelListFn()
    } else {
      // 车型列表
      this.carModelListFn(this.setBgImg)
    }
    if (ve_name) { //车名
      this.testDriveaParam.car_model = ve_name
    }
    let { brand_id } = this.brandInfo
    let { testDrivea } = this.tmplIds
    this.testDriveaParam.brand_id = brand_id
    this.testDrive.brand_id = brand_id
    this.testDrive.userInfo.template_id = testDrivea

    if (companyId) {
      this.testDriveaParam.company_id = companyId
      setTimeout(() => {
        let temp = this.centers.find(item => item.id == companyId)
          ?.value
        this.testDriveaParam.company = temp
      }, 300)
    } else if (scene) { // 二维码识别进入
      let param = decodeURIComponent(scene)
      let companyId = param.split('=')[1]
      this.testDriveaParam.company_id = companyId
      setTimeout(() => {
        let temp = this.centers.find(item => item.id == companyId)?.value
        this.testDriveaParam.company = temp
      }, 300)
    }

    // 是否登录
    if (!Object.keys(this.loginInfo).length) {
      this.$refs.openLogin.isShow()
      return false
    }

    carModel.brand_id = brand_id
    // 混合分享信息
    this.shareMixin.title = `预约试驾`
    this.shareMixin.path = `/pages/TestDrive/TestDrive`
  },
  methods: {
    // ------------------------ 选择公司弹窗**start ------------------------
    selectCom(e) {
      this.testDriveaParam.company = e
      this.$refs.selectComPopRef.close()
    },
    // ------------------------ 选择车型弹窗**开始 ------------------------
    selectCar(n) {
      console.log('n :>> ', n);
      this.imgBg = n.cover_piiic_img
      this.testDriveaParam.car_model = n.name
      this.$refs.selectCarPopupRef.close()
    },
    // ------------------------ 预约方式弹窗**start ------------------------
    selectWay(v) {
      this.testDriveaParam.way = v
      this.$refs.selectWatPopRef.close()
    },
    contactWay(v) {
      this.testDriveaParam.contactWay = v
      this.$refs.selectContactWayPopRef.close()
    },
    // 调用子组件方法
    openRules() {
      this.$refs.rule.openRul()
    },
    // 车型列表
    async carModelListFn(cb) {
      const {
        data: { code, data }
      } = await carModelListApi(carModel)
      if (code == 200) {

        this.carModelList = data
        if (cb) {
          let imgSrc = data?.[0]?.ve_groups?.[0]?.cover_piiic_img
          console.log('车型列表 :>> ', imgSrc);
          cb(imgSrc)
        }
      }
    },
    // ------------------------ 设置背景图-开始 ------------------------
    setBgImg(imgSrc) {
      let { brand } = this.brandInfo
      let baseUrl = `${this.baseUrl}/images/${brand}/car/`
      if (imgSrc) {
        this.imgBg = `${baseUrl}${imgSrc}`
      } else {
        this.imgBg = imgBg
      }
    },

    // 日期选择
    openPopup() {
      this.$refs.dateSelect.openPopup()
    },
    // 日期选择
    selectDate(e) {
      this.testDriveaParam.visit_time = e
    },
    // 返回主页
    backHome() {
      let routes = getCurrentPages()
      if (routes.length < 2) {
        uni.switchTab({ url: `/pages/index` })
      } else {
        uni.navigateBack({delta: 1 })
      }
    },
    ...mapMutations(['saveCenters', 'saveLatLog'])
  },
  computed: {
    ...mapState(['latLog', 'centers', 'tmplIds', 'loginInfo', 'brandInfo', 'carSeris',]),
    selectCarModelList() {
      let { brand } = this.brandInfo
      let baseUrl = `${this.baseUrl}/images/${brand}/car/`
      let list = []
      let carList = this.carModelList
      for (let j = 0; j < carList.length; j++) {
        let cars = carList[j].ve_groups
        for (let i = 0; i < cars.length; i++) {
          let { vem_vid, ve_name, cover_piiic_img, vem_coverImg } = cars[i]
          let imgBg = `${baseUrl}${cover_piiic_img}`
          let coverImg = `${baseUrl}${vem_coverImg}`
          list.push({ id: `${j + 1}-${i + 1}`, value: vem_vid, name: ve_name, vem_coverImg: coverImg, cover_piiic_img: imgBg })
        }
      }
      return list
    },
    // ------------------------ 是香港或澳门-开始 ------------------------
    isHKAndMacao() {
      let { company } = this.testDriveaParam
      return company.indexOf('港') > -1 || company.indexOf('澳') > -1
    },
    // ------------------------ 联系方式是香港-开始 ------------------------
    photoPrefix() {
      let { contactWay } = this.testDriveaParam
      if (contactWay.indexOf('港') > -1) {
        return "+852"
      }
      if (contactWay.indexOf('澳') > -1) {
        return "+853"
      }
      return ''
    },
    isHKAndMacaoContact() {
      let { contactWay } = this.testDriveaParam
      console.log('contactWay :>> ', contactWay);
      return contactWay.indexOf('港') > -1 || contactWay.indexOf('澳') > -1
    },
    formBoxStyle() {
      return `background: 'url(${this.imgBg})'; backgroundPosition: '50% -50%'; backgroundSize: '100% auto'; backgroundRepeat: 'no-repeat';`
    }
  },
  watch: {
    loginInfo: {
      handler(newVal = {}) {
        // 是否已登录
        if (Object.keys(newVal).length === 0) return false
        // 是否已获取定位
        if (Object.keys(this.latLog).length === 0) {
          this.getLocation()
        }
      },
      immediate: true
    },
    isHKAndMacaoContact: {
      handler(newVal) {
        console.log('newVal :>> ', newVal);
        this.rules = rulesTestDrive(newVal)
      },
      immediate: true
    },
  }
}
</script>
<style>
.uni-forms-item__label {
  font-size: 32rpx !important;
  /* font-weight: 600 !important; */
}

.uni-easyinput__content-input {
  font-size: 16px !important;
}
</style>
<style lang="scss" scoped>
@import '@/styles/mixins.scss';

::v-deep.uni-select {
  border: none !important;
}

::v-deep.uni-stat-box {
  border-bottom: 1px solid #ddd;
}

.card {
  // width: 90%;
  margin: 20rpx auto 60rpx auto;
  // box-shadow: $theme-shadow;
  border-radius: 10rpx;
  // background-color: #fff;
  padding: 0 30rpx 0 30rpx;
}

.fwb {
  font-weight: 600;
}

// ------------------------ 顶部背景图**start ------------------------
.top_bg {
  height: 60vh;
  margin-bottom: 5rpx;
  border-radius: 10rpx;
  z-index: 8;
  background-color: #fff;
  position: relative;
  // border: #f00 solid 1rpx;

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 340rpx;
    // border: #f0f solid 1rpx;
    background: linear-gradient(180deg, transparent, transparent, #fff, #fff);
    // background: linear-gradient(180deg, transparent, #fff, #fff, #fff);
  }
}

// ------------------------ 顶部背景图**end ------------------------
.form_box {
  z-index: 9;
  position: relative;
  top: -150rpx;
  // border: #f00 solid 1rpx;

  .title {
    font-size: 36rpx;
    line-height: 44rpx;
    padding-bottom: 20rpx;
    font-weight: 700;
    padding: 0 50rpx;
    font-family: 'LynkcoType-Bold';
    color: #24292b;
  }

  .phone_no {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

}

.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.my-input-box {
  position: relative;

  .my-input {
    padding: 0 10px;
    // font-size: 14px;
    font-size: 32rpx;
    color: #666;
    line-height: 35px;
    height: 35px;
    // font-weight: 600;
  }

  .placehol {
    color: #999 !important;
    // font-size: 32rpx !important;
    font-weight: 400 !important;
  }

  .icon {
    position: absolute;
    top: 12rpx;
    right: 5rpx;
  }
}

.form-item {
  display: flex;
  align-items: center;
}

// ------------------------ 底盒子**start ------------------------
.bottom-box {
  width: 100%;
  padding: 20rpx;
  margin-top: -200rpx;
  padding-bottom: 100rpx;

  .radio_box {
    font-size: 26rpx;
    margin-bottom: 30rpx;
    padding: 0 20rpx;
    display: flex;

    .policy {
      color: $theme-color;
    }
  }

  // 提交按钮
  .sub-btn {
    width: calc(100% - 20rpx);
    margin: 0 10rpx;
    border-radius: 6rpx;
    font-size: 32rpx;
    line-height: 88rpx;
    text-align: center;
    color: white;
    background-color: #24292b;
  }
}

// ------------------------ 选择弹窗样试**start ------------------------
@import '@/styles/testDrivePopup.scss';
</style>
